<script>
import {
  getComplaintDetail,
  getComplaintList,
  replyComplaint
} from '@/api/mallApi/advert'

export default {
  name: 'ComplaintPage',
  data() {
    return {
      id: '',
      replyOpinion: '',
      isEdit: true,
      isShow: false,
      // 页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      total: 0,
      formData: {
        userName: '', // 投诉人
        orderCode: '', // 订单编号
        complaintTheme: '', // 投诉主题
        status: null // 投诉状态 (1 待受理 2 受理中 3 已处理 4 已取消)
      },
      tableData: [],
      // 弹窗数据
      dialogData: {},
      dialogVisible: false,
      dialogRules: {
        complaintTheme: [
          { required: true, message: '请选择投诉主题', trigger: 'change' }
        ],
        complaintData: [
          { required: true, message: '请输入投诉内容', trigger: 'change' }
        ],
        img: [{ required: true, message: '请上传投诉图片', trigger: 'change' }]
      },
      isLoading: false
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      this.isLoading = true
      const params = {
        pageSize: this.size,
        pageNo: this.page,
        ...this.formData
      }
      getComplaintList(params)
        .then((res) => {
          if (res.code === '00000') {
            this.tableData = res.data.rows
            this.total = res.data.totalRows
            this.isLoading = false
          }
        })
        .catch((err) => {
          this.$message.error(err)
          this.isLoading = false
        })
    },
    // 分页
    changePage(page) {
      this.currentPage = page
      this.getTableData()
    },
    // 每页条数
    changeSize(size) {
      this.pageSize = size
      this.getTableData()
    },
    // 查看
    handleView(row) {
      this.getDialogData(row.id)
      this.dialogVisible = true
    },
    handleReply(row) {
      this.isShow = true
      this.id = row.id
    },
    ok() {
      const params = {
        id: this.id,
        replyOpinion: this.replyOpinion
      }
      replyComplaint(params)
        .then((res) => {
          if (res.code === '00000') {
            this.$message.success('回复成功')
            this.isShow = false
            this.replyOpinion = ''
            this.getTableData()
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleClose() {
      this.dialogVisible = false
      this.isEdit = true
      // 表单重置
      this.$refs.dialogForm.resetFields()
      this.dialogData = {}
    },
    getDialogData(val) {
      getComplaintDetail({ id: val })
        .then((res) => {
          if (res.code === '00000') {
            this.dialogData = res.data
            this.dialogData.orderMoney = (res.data.orderMoney / 100).toFixed(2)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    cancel() {
      this.isShow = false
      this.replyOpinion = ''
    },
    search() {
      this.getTableData()
    },
    empty() {
      this.formData = {
        userName: '', // 投诉人
        orderCode: '', // 订单编号
        complaintTheme: '', // 投诉主题
        status: null // 投诉状态 (1 待受理 2 受理中 3 已处理 4 已取消)
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="search">
      <div class="form">
        <div class="formLeft">
          <el-form :inline="true" :model="formData">
            <el-form-item label="投诉人:">
              <el-input
                clearable
                v-model="formData.userName"
                placeholder="请输入投诉人:"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号:">
              <el-input
                clearable
                v-model="formData.orderCode"
                placeholder="请输入订单编号:"
              ></el-input>
            </el-form-item>
            <el-form-item label="投诉主题:">
              <el-select
                clearable
                v-model="formData.complaintTheme"
                placeholder="请选择投诉主题:"
              >
                <el-option label="商品质量" value="商品质量"></el-option>
                <el-option label="服务态度" value="服务态度"></el-option>
                <el-option label="物流问题" value="物流问题"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投诉状态:">
              <el-select
                clearable
                v-model="formData.status"
                placeholder="请选择投诉状态"
              >
                <el-option label="待受理" :value="1"></el-option>
                <el-option label="受理中" :value="2"></el-option>
                <el-option label="已处理" :value="3"></el-option>
                <el-option label="已取消" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item> </el-form-item>
          </el-form>
        </div>

        <div class="formRight">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="empty">重置</el-button>
        </div>
      </div>
    </div>
    <div class="complaintPage">
      <!-- <div class="search">
      <div class="form">
        <el-form :inline="true" :model="formData">
          <el-form-item label="投诉人">
            <el-input
              clearable
              v-model="formData.userName"
              placeholder="请输入投诉人"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input
              clearable
              v-model="formData.orderCode"
              placeholder="请输入订单编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="投诉主题">
            <el-select
              clearable
              v-model="formData.complaintTheme"
              placeholder="请选择投诉主题"
            >
              <el-option label="商品质量" value="商品质量"></el-option>
              <el-option label="服务态度" value="服务态度"></el-option>
              <el-option label="物流问题" value="物流问题"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉状态">
            <el-select
              clearable
              v-model="formData.status"
              placeholder="请选择投诉状态"
            >
              <el-option label="待受理" :value="1"></el-option>
              <el-option label="受理中" :value="2"></el-option>
              <el-option label="已处理" :value="3"></el-option>
              <el-option label="已取消" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="empty">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      /.form
    </div> -->
      <!-- /.search -->
      <div class="table" style="padding: 20px">
        <div v-if="!tableData.length && !isLoading" class="tableDiv">
          <img alt="" src="./缺省页.png"  />
          <p>
            暂时没有搜索到您要找的内容！
          </p>
        </div>
        <el-table
          v-else
          v-loading="isLoading"
          :data="tableData"
          :row-style="{ height: '38.5px' }"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            min-width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="排序" min-width="40" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <!-- 投诉人 -->
          <el-table-column
            prop="nickName"
            label="投诉人"
            min-width="100"
            align="center"
          >
          </el-table-column>
          <!-- 订单编号 -->
          <el-table-column prop="orderCode" label="订单编号" min-width="300">
          </el-table-column>
          <!-- 投诉主题 -->
          <el-table-column
            prop="complaintTheme"
            label="投诉主题"
            min-width="100"
            align="center"
          >
          </el-table-column>
          <!-- 投诉状态 -->
          <el-table-column
            prop="status"
            label="投诉状态"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 1 待受理 2 受理中 3 已处理 4 已取消 -->
              <el-tag
                v-if="scope.row.status === 1"
                type="warning"
                effect="dark"
                size="mini"
              >待受理
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 2"
                type="success"
                effect="dark"
                size="mini"
              >受理中
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 3"
                type="success"
                effect="dark"
                size="mini"
              >已处理
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 4"
                type="danger"
                effect="dark"
                size="mini"
              >已取消
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintData"
            label="描述"
            align="center"
          ></el-table-column>
          <!-- 投诉时间 -->
          <el-table-column
            prop="orderTime"
            label="投诉时间"
            min-width="180"
            align="center"
          >
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" min-width="160" align="center">
            <template slot-scope="scope">
              <el-button class="btn" size="mini" @click="handleView(scope.row)"
              >查看
              </el-button>
              <!-- -->
              <el-button
                class="btn"
                size="mini"
                type="danger"
                @click="handleReply(scope.row)"
                v-show="!scope.row.replyOpinion"
              >
                回复
              </el-button>
              <el-dialog title="确认回复" :visible.sync="isShow" width="30%">
                <el-form label-width="80px">
                  <el-form-item label="回复内容">
                    <el-input
                      type="textarea"
                      placeholder="请输入回复内容"
                      v-model="replyOpinion"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="ok">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="end" type="flex">
          <!-- <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="total"
            background
            layout="prev, pager, next, sizes"
            style="margin-top: 20px"
            @current-change="changePage"
            @size-change="changeSize"
          >
          </el-pagination> -->
          <el-pagination
            background
            style="margin-top: 20px; margin-bottom: 20px"
            @size-change="changeSize"
            @current-change="changePage"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </div>
      <div class="dialog">
        <el-dialog title="投诉详情" :visible.sync="dialogVisible" width="54%">
          <el-form
            :model="dialogData"
            ref="dialogForm"
            label-width="150px"
            inline
            :rules="dialogRules"
          >
            <el-form-item label="投诉人">
              <el-input
                v-model="dialogData.nickName"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input
                v-model="dialogData.orderCode"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <!-- 订单金额 -->
            <el-form-item label="订单金额">
              <el-input
                v-model="dialogData.orderMoney"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="投诉主题" prop="complaintTheme">
              <el-select
                style="width: 300px"
                v-model="dialogData.complaintTheme"
                placeholder="请选择投诉主题"
                :disabled="isEdit"
              >
                <el-option label="商品质量" value="商品质量"></el-option>
                <el-option label="服务态度" value="服务态度"></el-option>
                <el-option label="物流问题" value="物流问题"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投诉内容" prop="complaintData">
              <el-input
                v-model="dialogData.complaintData"
                :disabled="isEdit"
                style="width: 300px"
                placeholder="请输入投诉内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="投诉时间">
              <el-input
                v-model="dialogData.orderTime"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="投诉图片" prop="img">
              <el-image
                style="margin-right: 150px; width: 150px; height: 150px"
                :src="dialogData.img"
                :preview-src-list="[dialogData.img]"
              ></el-image>
            </el-form-item>
            <el-form-item label="处理时间" v-show="dialogData.handleTime">
              <el-input
                v-model="dialogData.handleTime"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理人" v-show="dialogData.handlePersonName">
              <el-input
                v-model="dialogData.handlePersonName"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理备注" v-show="dialogData.handleOpinion">
              <el-input
                type="textarea"
                v-model="dialogData.handleOpinion"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <!--受理-->
            <el-form-item label="受理人" v-show="dialogData.acceptPerson">
              <el-input
                v-model="dialogData.acceptPerson"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="受理时间" v-show="dialogData.acceptTime">
              <el-input
                v-model="dialogData.acceptTime"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <!--受理备注-->
            <el-form-item label="受理备注" v-show="dialogData.acceptOpinion">
              <el-input
                type="textarea"
                v-model="dialogData.acceptOpinion"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <!--回复人-->
            <el-form-item label="回复人" v-show="dialogData.replyPersonName">
              <el-input
                v-model="dialogData.replyPersonName"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="回复时间" v-show="dialogData.replyTime">
              <el-input
                v-model="dialogData.replyTime"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="回复内容" v-show="dialogData.replyOpinion">
              <el-input
                type="textarea"
                v-model="dialogData.replyOpinion"
                :disabled="isEdit"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-tag
                v-if="dialogData.status === 1"
                type="warning"
                effect="dark"
                size="mini"
              >待受理
              </el-tag>
              <el-tag
                v-else-if="dialogData.status === 2"
                type="success"
                effect="dark"
                size="mini"
              >受理中
              </el-tag>
              <el-tag
                v-else-if="dialogData.status === 3"
                type="success"
                effect="dark"
                size="mini"
              >已处理
              </el-tag>
              <el-tag
                v-else-if="dialogData.status === 4"
                type="danger"
                effect="dark"
                size="mini"
              >已取消
              </el-tag>
            </el-form-item>
            <!-- 关闭取消 -->
            <el-row type="flex" justify="center">
              <el-form-item>
                <el-button type="primary" @click="handleClose">关闭</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 98%;
  margin: 1%;
  min-height: 75px;
  background: #fff;
  .form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    ::v-deep .el-form-item__label {
      color: #000;
      font-weight: 400;
    }
    .formLeft {
      margin-left: 20px;
      margin-top: 20px;
    }
    .formRight {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 20px;
      // margin-top: 20px;
    }
  }
}
.complaintPage {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  .table {
    .tableDiv {
      width: 30%;
      height: auto;
      margin: auto;
      display: flex;
      flex-direction: column;
      img {
        width: 300px;
        height: 300px;
      }
      p{
        margin-left: 80px;
        font-size: 14px; color: #626262
      }
    }
  }
}
</style>
